<template>
  <div class="headline" flex="dir:left main:center cross:center">
    <div class="line-box" flex="dir:top main:justify cross:center">
      <div class="line-01"></div>
      <div class="line-02"></div>
    </div>
    <p :style="txtStyle">{{txt}}</p>
    <div class="line-box" flex="dir:top main:justify cross:center">
      <div class="line-01"></div>
      <div class="line-02"></div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "headline",
    props: {
      txt: String,
      txtStyle: Object
    },
	}
</script>

<style scoped lang="scss">
  .headline {
    .line-box {
      height: 14px;
      .line-01, .line-02 {
        height: 5px;
        background: #0B9773;
      }

      .line-01 {
        width: 63px;
      }

      .line-02 {
        width: 59px;
      }
    }

    p {
      padding: 0 21px;
      font-size: 13px;
    }
  }
</style>
